<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Icon from "@iconify/svelte";
    import Timeline from "./Timeline.svelte";
    import { Link } from "../Typography";
    import Space from "../Space/Space.svelte";
    import TimelineItem from "./TimelineItem.svelte";

    const { Story } = defineMeta({
        title: "Components/Views/Timeline",
        component: Timeline,
        subcomponents: { TimelineItem },
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Timeline>
            <TimelineItem>
                <span class="time">1976年</span>
                <span class="content">Apple I 问世</span>
            </TimelineItem>
            <TimelineItem>
                <span class="time">1984年</span>
                <span class="content">发布 Macintosh</span>
            </TimelineItem>
            <TimelineItem>
                <span class="time">2007年</span>
                <span class="content">发布 iPhone</span>
            </TimelineItem>
            <TimelineItem>
                <span class="time">2010年</span>
                <span class="content">发布 iPad</span>
            </TimelineItem>
        </Timeline>
    {/snippet}
</Story>

<Story name="Colors">
    {#snippet template(args)}
        <Timeline>
            <TimelineItem color="green">发布1.0版本</TimelineItem>
            <TimelineItem color="green">发布2.0版本</TimelineItem>
            <TimelineItem color="red">严重故障</TimelineItem>
            <TimelineItem color="yellow">发布3.0版本</TimelineItem>
        </Timeline>
    {/snippet}
</Story>

<Story name="Fill">
    {#snippet template(args)}
        <Timeline>
            <TimelineItem color="green" fill>发布1.0版本</TimelineItem>
            <TimelineItem color="green" fill>发布2.0版本</TimelineItem>
            <TimelineItem color="red" fill>严重故障</TimelineItem>
            <TimelineItem color="yellow" fill>发布3.0版本</TimelineItem>
        </Timeline>
    {/snippet}
</Story>

<Story name="ModeAlternate">
    {#snippet template(args)}
        <Timeline mode="alternate">
            <TimelineItem time="2023-01-01 12:00:00">
                <span class="time">第一个节点内容</span>
                <span class="content">描述信息</span>
            </TimelineItem>
            <TimelineItem time="2023-01-02 12:00:00">
                <span class="time">第二个节点内容</span>
                <span class="content">描述信息</span>
            </TimelineItem>
            <TimelineItem time="2023-01-03 12:00:00">
                <span class="time">第三个节点内容</span>
                <span class="content">描述信息</span>
            </TimelineItem>
            <TimelineItem time="2023-01-04 12:00:00">
                <span class="time">第四个节点内容</span>
                <span class="content">描述信息</span>
            </TimelineItem>
            <TimelineItem time="2023-01-05 12:00:00">
                <span class="time">第五个节点内容</span>
                <span class="content">描述信息</span>
            </TimelineItem>
        </Timeline>
    {/snippet}
</Story>

<Story name="ModeRight">
    {#snippet template(args)}
        <Timeline mode="right">
            <TimelineItem time="2023-01-01 12:00:00">
                <span class="time">第一个节点内容</span>
                <span class="content">描述信息</span>
            </TimelineItem>
            <TimelineItem time="2023-01-02 12:00:00">
                <span class="time">第二个节点内容</span>
                <span class="content">描述信息</span>
            </TimelineItem>
            <TimelineItem time="2023-01-03 12:00:00">
                <span class="time">第三个节点内容</span>
                <span class="content">描述信息</span>
            </TimelineItem>
        </Timeline>
    {/snippet}
</Story>

<Story name="ModeCenter">
    {#snippet template(args)}
        <Timeline mode="center">
            <TimelineItem time="2023-01-01 12:00:00">
                <span class="time">第一个节点内容</span>
                <span class="content">描述信息</span>
            </TimelineItem>
            <TimelineItem time="2023-01-02 12:00:00">
                <span class="time">第二个节点内容</span>
                <span class="content">描述信息</span>
            </TimelineItem>
            <TimelineItem time="2023-01-03 12:00:00">
                <span class="time">第三个节点内容</span>
                <span class="content">描述信息</span>
            </TimelineItem>
        </Timeline>
    {/snippet}
</Story>

<Story name="NodeIcon">
    {#snippet template(args)}
        <Timeline>
            <TimelineItem color="green">
                {#snippet icon()}
                    <Icon icon="f7:tree" size={13} />
                {/snippet}
                发布1.0版本</TimelineItem
            >
            <TimelineItem color="green">发布2.0版本</TimelineItem>
            <TimelineItem color="red">严重故障</TimelineItem>
            <TimelineItem color="blue">发布3.0版本</TimelineItem>
        </Timeline>
    {/snippet}
</Story>
